<template>
  <section class="box">
    <el-dialog
      draggable
      :model-value="dialogVisible"
      width="840px"
      @close="close"
    >
      <template #header>
        <div class="header">流程图</div>
      </template>
      <div class="explain">
        <div class="explain_mode" v-for="(item, i) in colorArray" :key="i">
          <span class="box" :style="{ 'background-color': item.color }"></span>
          {{ item.title }}
        </div>
      </div>
      <section>
        <div class="flow flex" v-for="(mode, m) in options" :key="m">
          <div class="mode flex radius" v-for="(item, i) in mode" :key="i">
            <aside style="position: relative">
              <span
                class="title"
                :class="{
                  end: item.type == 'end',
                  green: finishNode(item.activeNode),
                  brown: item.type == 'end' && finishNode(item.activeNode),
                  radius: item.radius,
                }"
              >
                {{ item.title }}
              </span>
              <!-- 下 -->
              <b v-if="item.line" class="line-down" :class="item.line"></b>

              <img
                v-if="finishNode(item.activeNode)"
                class="activeIcon"
                :src="`${ossURlZjk}/dms/image/active.png`"
                alt=""
              />
            </aside>
            <!-- 右 -->
            <b
              v-if="
                i < mode.length - 1 &&
                item.type != 'right-up' &&
                item.type != 'line-left' &&
                item.type != 'line-not'
              "
              class="line-right"
            ></b>
            <!-- 左 -->
            <b v-if="item.type == 'line-left'" class="line-left"></b>
            <!-- 右上 -->
            <div v-show="item.type == 'right-up'" class="line-right-up">
              <span class="right"></span>
              <span class="up"></span>
            </div>

            <!-- line-max -->
            <b
              v-if="item.type == 'line-max'"
              class="line-max"
              :class="item.line"
            ></b>
          </div>
        </div>
      </section>
      <template #footer>
        <div class="flex_center">
          <VabButton
            title="知道了"
            type="primary"
            size="default"
            @click="close"
          />
        </div>
      </template>
    </el-dialog>
  </section>
</template>
<script lang="ts" setup>
  import { ossURlZjk } from '~/src/config'

  /**
   * @vab
   */

  const dialogVisible = ref(false)
  const colorArray = [
    { color: '#C9F5D3', title: '已完成节点' },
    { color: '#f0f0f0;', title: '未完成节点' },
  ]
  // 节点；列表
  const nodeList = ref<any>([])

  /**
   * @param{
   *  title: '名称',
   *  type: '类型',
   *  line: '线条类型'
   *  radius: '圆角'
   * }
   */
  const options = ref<any>([
    [
      {
        title: '合作提报',
        type: '',
        activeNode: 'Start',
        radius: true,
      },
      {
        title: '已提交',
        type: '',
        line: 'dashed',
        activeNode: 'Save',
      },
      {
        title: '卖方已接收',
        type: '',
        activeNode: 'OrderIsHandle',
      },
      {
        title: '卖方已下单',
        type: '',
        activeNode: 'OrderWaitConfirm',
      },
      {
        title: '信用额度扣减成功',
        type: 'line-max',
        activeNode: 'OrderIsPay',
      },
    ],
    [
      {
        title: '存为草稿',
        type: 'right-up',
        activeNode: 'Draft',
      },
      {
        title: '已取消',
        type: '',
        activeNode: 'Cancel',
      },
    ],
    [
      {
        title: '结束',
        type: 'line-not',
        activeNode: 'End',
        radius: true,
      },
      {
        title: '已收货',
        type: 'line-left',
        activeNode: 'OrderIsPick',
      },
      {
        title: '已发出',
        type: 'line-left',
        activeNode: 'OrderIsInTransit',
      },
      {
        title: '已出库',
        type: 'line-left',
        activeNode: 'OrderIsInTransit',
      },
      {
        title: '已付款',
        type: 'line-left',
        activeNode: 'OrderIsPay',
      },
    ],
  ])
  /**
   * @method
   */
  const close = () => {
    dialogVisible.value = false
  }
  const open = (node = ['Draft', 'CancelAndEnd', 'End']) => {
    dialogVisible.value = true
    nodeList.value = node
  }

  // 完成节点
  const finishNode = (activeNode: string) => {
    const nodeListStr = nodeList.value.toString()
    return nodeListStr.includes(activeNode)
  }

  /**
   * @实例
   */
  defineExpose({
    close,
    open,
  })
</script>

<style lang="scss" scoped>
  .box {
    :deep() {
      .el-dialog__header {
        border-bottom: 1px solid #e9e9e9;
        margin-right: 0px;
        padding: 12px 24px;
      }
      .el-dialog__headerbtn {
        top: 0;
      }
      .el-dialog__body {
        padding: 17px 24px;
      }

      .el-dialog__footer {
        border-top: 1px solid #e9e9e9;
        padding: 16px 0;
      }
    }
    .header {
      height: 24px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      font-size: 16px;
      color: #1d2129;
      letter-spacing: 0;
      line-height: 24px;
    }
  }

  section {
    overflow-y: auto;
    padding: 20px 0px;
  }
  .flow {
    margin-bottom: 80px;
    &:last-child {
      margin-bottom: 0px;
      justify-content: flex-end;
    }
    .mode {
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 10px;
      margin-right: 50px;
      border-radius: 2px;

      &:first-child {
        margin-left: 0px;
      }
      &:last-child {
        margin-right: 0px;
      }
      cursor: auto;

      .activeIcon {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 16px;
        height: 16px;
        z-index: 11;
      }
      .title {
        padding: 11px 20px;
        font-family: PingFangSC-Medium;
        font-weight: 600;
        font-size: 14px;
        color: #8c8c8c;
        text-align: center;
        white-space: nowrap;
        display: flex;
        align-items: center;
        line-height: 20px;
        justify-content: center;
        position: relative;
        background: #f0f0f0;
        border-radius: 4px;

        &.radius {
          border-radius: 21px;
        }

        // 开始
        &.start {
          border-radius: 20px;
        }
        &.end {
          border-radius: 20px;
          background: #f0f0f0;
          border-radius: 4px;
        }
        // 褐色
        &.brown {
          border-radius: 20px;
          background-color: #696969 !important;
        }
        // 未进行
        &.grey {
          background: #f0f0f0;
          border-radius: 4px;
        }
        // 当前完成项
        &.active {
          background-color: #4e88f3;
        }
        // 已完成项
        &.green {
          background: #c9f5d396;
          color: #149c4a;
        }
      }
      .line-right {
        font-style: normal;
        border-top: 1px solid #99e8ae;
        width: 50px;
        height: 1px;
        position: absolute;
        top: 50%;
        right: -51px;
        &::after {
          content: '';
          position: absolute;
          top: -6.5px;
          right: -6px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 0 6px 6px;
          border-color: transparent transparent transparent #99e8ae;
        }
      }
      .line-left {
        font-style: normal;
        border-top: 1px solid #99e8ae;
        width: 50px;
        height: 1px;
        position: absolute;
        top: 50%;
        left: -51px;
        &::before {
          content: '';
          position: absolute;
          top: -6.5px;
          left: -6px;
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-right: 6px solid #99e8ae;
          border-bottom: 6px solid transparent;
        }
      }
      .line-down {
        font-style: normal;
        border-left: 1px solid #99e8ae;
        width: 10px;
        height: 60px;
        position: absolute;
        top: 48px;
        left: 50%;
        &::after {
          content: '';
          position: absolute;
          bottom: -6.5px;
          left: -6px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 6px 0 6px;
          border-color: #99e8ae transparent transparent transparent;
        }
        &.solid {
          border-left: 1px solid #99e8ae;
        }
        &.dashed {
          border-left: 1px dashed #99e8ae;
        }
      }
      .line-not {
        display: none;
      }

      .line-right-up {
        position: static;
        .right {
          position: absolute;
          top: 50%;
          right: -28px;
          border-top: 1px solid #99e8ae;
          width: 27px;
          height: 1px;
        }
        .up {
          position: absolute;
          top: -98px;
          right: -28px;
          border-left: 1px solid #99e8ae;
          width: 1px;
          height: 120px;
        }
      }

      .line-max {
        font-style: normal;
        border-left: 1px solid #99e8ae;
        width: 10px;
        height: 181px;
        position: absolute;
        top: 48px;
        left: 79%;
        &::after {
          content: '';
          position: absolute;
          bottom: -6.5px;
          left: -7px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 6px 0 6px;
          border-color: #99e8ae transparent transparent transparent;
        }
        &.solid {
          border-left: 1px solid #99e8ae;
        }
        &.dashed {
          border-left: 1px dashed #99e8ae;
        }
      }
    }
  }

  aside {
    span {
      cursor: pointer;
    }
  }
  section {
    position: relative;
    .explain {
      display: flex;
      justify-content: flex-end;
      .explain_mode {
        display: flex;
        align-items: center;
        // margin-bottom: 12px;
        height: 20px;
        font-family: PingFangSC-Regular;
        font-weight: 500;
        font-size: 12px;
        color: #1d2129;
        letter-spacing: 0;
        line-height: 20px;
        margin-right: 16px;
        &:last-child {
          margin-right: 0px;
        }
        .box {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #f0f0f0;
          margin-right: 4px;
        }
      }
    }
  }
</style>
